<template>

	<view class="container">

		<view style="
		 background: linear-gradient(to bottom,#4A9BFF 0%,#3988FD 50%, #1262E4 100%);
		height: 194px;
		padding-top: 10px;
		padding-left: 10px;">
			<uni-icons type="left" size="20" color="#fff" @click="goToBack"></uni-icons>
			<text style="color: #fff; font-size: 16px;font-weight: bold; margin-left: 140px;">详情</text>
		</view>
		<view class="content-up">
			<view class="title">
				<text>维修信息</text>
			</view>
			<view class="content-up-list">
				<uni-group>
					<view>维修单号：{{this.repairDetails.id}}</view>
					<view>车主姓名：{{this.repairDetails.name}}</view>
					<view>联系方式：{{this.repairDetails.phone}}
						<image class="photo-one" src="../../../static/phone.png"></image>
					</view>
					<view v-if="this.repairDetails.type == 0">
						维修方式：到店维修
					</view>
					<view v-if="this.repairDetails.type == 1">
						维修方式：上门取车
					</view>
					<view v-if="this.repairDetails.type == 1">取车位置:山阳区32号
						<image class="photo-two" src="../../../static/address.png"></image>
					</view>
					<view>预约日期：{{this.repairDetails.reservationTime}}</view>
					<view>提交日期：{{this.repairDetails.submitTime}}</view>
				</uni-group>
			</view>
		</view>
		<view class="content-top">
			<view class="title">
				<text>车辆信息</text>
			</view>
			<view class="content-up-list">
				<uni-group>
					<view>车辆类型:{{this.repairDetails.carType.name}}</view>
					<view>车牌号:{{this.repairDetails.carNum}}</view>
					<view>整车照片：
					</view>
					<view class="image-container">
						<image v-for="(item,index) in this.vehiclePhotos" class="evaluateimg" :src="item" mode=""></image>
					</view>
					<view>维修部位照片：</view>
					<view class="image-container">
						<image v-for="(item,index) in this.repairPhotos" class="evaluateimg" :src="item" mode="">
						</image>
					</view>
				</uni-group>
			</view>

		</view>
		<button type="default" style="border-radius: 20px; background-color: #cdcdcd; margin-top: 20px;  width: 300px;" v-if="this.repairDetails.status == 2">已完成</button>
		<button type="primary" @click="dialogToggle1('info')"
			style="border-radius: 20px; background-color: #1564E6; margin-top: 20px;  width: 300px;" v-if="this.repairDetails.status == 1">完成维修</button>
		<button type="primary" @click="dialogToggle('info')"
			style="border-radius: 20px; background-color: #1564E6; margin-top: 20px;  width: 300px;" v-if="this.repairDetails.status == 0">确认到场</button>
		<view v-if="this.repairDetails.status == 0">
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="确认到场"
					content="请你仔细确认是否到场,确认后不可修改" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view v-if="this.repairDetails.status == 1">
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="确认完成维修"
					content="请你确认是否完成维修,确认后不可修改" @confirm="dialogConfirm1" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view style="height: 20px;">
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				token: '',
				repairId: '',
				repairDetails: '',
				vehiclePhotos: [],
				repairPhotos: [],
				status:''
			}
		},
		methods: {
			goToIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			goToBack() {
				uni.navigateTo({
					url: '/pages/repairTask/repairTask',
				})
			},
			dialogToggle(type) {
				this.msgType = type
				console.log(this.msgType)
				this.$refs.alertDialog.open()
			},
			dialogToggle1(type) {
				this.msgType = type
				console.log(this.msgType)
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				this.status = 1
				// this.$refs.message.open()
				uni.request({
					url:'http://localhost/dev-api/merchant/reservation',
					method:'PUT',
					header:{
						'Authorization': this.token
					},
					data:{
						id:this.repairDetails.id,
						status: this.status
					}
				})
			},
			dialogConfirm1() {
				this.status = 2
				// this.$refs.message.open()
				uni.request({
					url:'http://localhost/dev-api/merchant/reservation',
					method:'PUT',
					header:{
						'Authorization': this.token
					},
					data:{
						id:this.repairDetails.id,
						status: this.status
					}
				})
			},
			dialogClose() {
				console.log('点击关闭')
			},
			onLoad(event) {
				console.log('event', event.id)
				this.repairId = event.id
				const token = uni.getStorageSync('Token');
				this.token = token
				uni.request({
					url: 'http://localhost/dev-api/merchant/reservation/' + event.id,
					method: 'GET',
					header: {
						'Authorization': token
					},
					success: (resp) => {
						this.repairDetails = resp.data.data
						console.log('resp', this.repairDetails);
						this.vehiclePhotos = this.repairDetails.vehiclePhotos.split(',')
						this.repairPhotos = this.repairDetails.repairPhotos.split(',')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.button {

		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.box-bg {
		margin-top: 0px;
		z-index: 1;
	}


	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;

	}

	.content-up {
		height: 300px;
		background-color: #fff;
		margin: -130px 10px 0; //上，左右，下
		border-radius: 15px;
		padding: 14px 20px;
		margin-bottom: 20px;
	}

	.title {
		align-items: center;
		border-bottom: 2px solid #ccc;
		padding: 8px;
		font-size: 16px;
		font-weight: bold;
	}

	.content-up-list {
		margin-top: -10px;
	}

	.content-up-list view {
		padding: 5px;
		margin-left: -8px;
	}

	.content-top {
		height: 420px;
		background-color: #fff;
		margin: 20px 10px 0; //上，左右，下
		border-radius: 15px;
		padding: 14px 20px;

	}

	.submit {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: 20px;
	}

	.submit-o {
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 20px;
	}

	.submit-t {
		font-size: 14px;
		padding-bottom: 40px;
	}


	.content-top image {
		width: 100px;
		height: 100px;
	}

	.photo-one {
		width: 20px;
		height: 20px;
		margin-left: 100px;
		padding-bottom: -10px;
	}

	.photo-two {
		width: 20px;
		height: 20px;
		margin-left: 120px;
		padding-bottom: -10px;
	}

	.image-container {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 在主轴上分配间距 */
		align-items: center;
		gap: 4px;
	}

	.image-container .photoview {
		width: 100px;
		height: 100px;
		object-fit: cover;
	}

	.photoview {
		width: 100px;
		height: 100px;
	}
</style>